<template>
  <div id="home">
<!--    顶部状态栏-->
    <nav-bar class="home-navbar">
      <p slot="center">购物街</p>
    </nav-bar>
<!--      复制的tabc-->
      <tab-control ref="tabControl1"
                   :title="['流行','新款','精选']"
                   @tabClick="tabClick"
                   class="tabControl1"
                   v-show="isTabFixed"
      />

<!--    =============滚动部分============-->
<!--    调用scroll框架，pro是传入参数进行滚动监听，scroll是监听传出的自定义函数包含是position-->
    <scroll class="content" ref="scroll"  :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true" @pullingUp="loadMore"   >
      <!--    轮播图-->
      <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad" ></home-swiper>

      <!--    推荐模块-->
      <recommend-view :recommends="recommends"></recommend-view>

      <!--    每周推荐-->
      <feature-view></feature-view>

      <!--    内容部分的bar-->
      <tab-control ref="tabControl2"
                   :title="['流行','新款','精选']"
                   @tabClick="tabClick"
      />
      <!--                监听自定义事件-->

      <!--    商品列表-->
      <!--    使用currentType来代替属性-->
      <goods-list :goods="showGoods" />

    </scroll>

<!--    =========返回顶部按钮=============-->
<!--    当scroll标签监听到滚动时触发函数，改变isShowBackTop，来显示和隐藏-->
    <back-top @click.native="backClick" v-show="isShowBackTop" />

    <!--    //长度填充,已删除-------------------------------------------->


  </div>
</template>

<script>
//导入BScroll框架
import scroll from '../../components/common/scroll/Scroll';
// 导入顶部状态栏
import NavBar from "../../components/common/navbar/NavBar";
//导入内容部分的bar
import TabControl from "../../components/content/TabControl";
// 导入商品列表
import GoodsList from "../../components/content/goods/GoodsList";
//导入返回按钮
import backTop from 'components/content/backTop/BackTop'
//导入防抖函数
import {debounce} from "../../components/common/utils";


// 导入轮播图
import HomeSwiper from "./childcomps/HomeSwiper";
//导入推荐
import RecommendView from "./childcomps/RecommendView";
// 导入每周推荐
import FeatureView from "./childcomps/FeatureView";

// 导入数据
import { getHomeMultidata , getHomeGoods } from "../../network/Home";

export default {
  name: "Home",
  data(){
    return {
      // result: null

      banners: [],
      recommends: [],
      goods:{
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell':{page: 0, list: []},
      },
      currentType: 'pop',
      scroll: null,
      isShowBackTop: false,
      tabOffsetTop: 0 ,
      isTabFixed: false,
      saveY: 0

    }
  },
  computed: {
    showGoods(){
      //展示商品列表
      return this.goods[this.currentType].list
    }
  },

  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    scroll,
    backTop
  },
  //组件创建完就发送网络请求
  created() {
    //请求多个数据,加this才是调用方法，不然就是组件了
    this.getHomeMultidata()

    //请求商品数据
    this.getHomeGoods('pop' )
    this.getHomeGoods('new' )
    this.getHomeGoods('sell')

  },

  //===========保存home状态==========
  destroyed(){
    console.log('destroyed');
  },
  activated() {
    //刷新一下
    this.$refs.scroll.refresh()
    //跳转到这个位置
    this.$refs.scroll.scrollTo(0, this.saveY , 0)

  },
  deactivated() {
    //离开时保存位置
    this.saveY = this.$refs.scroll.scroll.y
    console.log(this.saveY);
  },

  mounted() {

    //赋值函数，把scroll里的refresh作为参数传入
    const refresh = debounce(this.$refs.scroll.refresh, 50)

    //监听item的img加载完成
    this.$bus.$on('homeItemImgLoad', ()=>{
      // 未采用防抖
      // this.$refs.scroll.refresh()
      //采用防抖
      // console.log('监听到Home的img加载的次数');
      refresh()

    })

  },

  methods: {

    // //===========refresh防抖（已封装到utils）============
    // //逻辑就是第一次执行refresh（已经被定义成定时器）
    // // 因为定时器会延迟执行函数（refresh），
    // // 然后如果在这时间内监听到了新的图片加载完成就会再次执行refresh
    // //这时上一个定时器被清除，开始生成新的定时器，所以有延续了delay的时间
    // //直到没有新的图片加载在delay范围内被监听到，执行fnc，也就是scroll的refresh
    // debounce(func, delay){
    //   //初始化定时器
    //   let timer = null
    //   //返回函数赋值给新的refresh
    //   return function (...args){
    //     //如果有定时器就清除
    //     if(timer)clearTimeout(timer)
    //     //赋值定时器，并设定时间（delay）
    //     timer = setTimeout(()=>{
    //       //再过delay毫秒就执行fnc函数（refresh）
    //       func.apply(this, args)
    //     }, delay)
    //   }
    // },



    //============方法==================
    tabClick(index){
      switch (index){
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      //实现两个tabC的同步
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
    },


    //============请求数据==================
    //创建请求多个数据的方法，函数名叫getxxx
    getHomeMultidata(){
      //调用组件getxxx的方法
      getHomeMultidata().then(res=> {
        // console.log(res.data);

        this.banners = res.data.data.banner.list
        this.recommends = res.data.data.recommend.list
      })
    },


    //创建请求商品数据的方法
    getHomeGoods(type){
      //每次调用时使page加一，也就是请求下一页数据
      const page = this.goods[type].page + 1
      // 请求数据
      getHomeGoods(type, page).then(res => {
        // 储存数据
        this.goods[type].list.push(...res.data.data.list)
        // 因为储存了数据，所以页码也要储存为加一
        this.goods[type].page += 1

        //重置上拉加载次数，这里放到getHomeGoods里面了
        this.$refs.scroll.finishPullUp()

      })

    },


    //返回顶部
    backClick(){
      // console.log('返回顶部');

      this.$refs.scroll.scrollTo(0, 0 )
      // console.log(this.$refs.scroll.message);
      // // this.$refs.scroll.scroll.scrollTo(0, 0, 500)
    },


    //监听Scroll的滚动
    contentScroll(position){

      //1、判断返回顶部是否显示和隐藏
      this.isShowBackTop = (-position.y) > 1000
      // console.log(position.y);

      //2、判断tabControl的fixed是否显示
      //判断并切换状态
      this.isTabFixed = (-position.y) > this.tabOffsetTop

    },

    //获取tabControl的offsetTop
    swiperImgLoad(){
      // console.log(this.$refs.tabControl.$el.offsetTop);
      //赋值
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    },

    //上拉加载更多
    loadMore(){

      console.log('上拉加载loadMore');

      //调用加载方法，传入参数是为确定当前品类
      this.getHomeGoods(this.currentType)

      // //重置加载次数，这里放到getHomeGoods里面了
      // this.$refs.scroll.finishPullUp()

      //刷新高度
      this.$refs.scroll.scroll.refresh()

    },


  },


}
</script>

<style scoped>

  #home{
    /*padding-top: 44px;*/
    position: relative;
    height: 100vh;

  }

  .home-navbar{
    /*使用之前base定义的变量*/
    background-color: var(--color-tint);
    color: #fff;

    /*!*在使用原生滚动时为了不跟随滚动才使用的，用了BScroll就不用了*!*/
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*z-index: 9;*/
  }

  /*.tab-control{*/
  /*  position: sticky;*/
  /*  top: 44px;*/
  /*  使用BScroll框架重构后就不起作用了*/
  /*}*/

  .fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
  }

  /*scroll的高度*/
  .content{
    /*height: 300px;*/
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 44px;
    left: 0;
    right: 0;
  }

  /*复制到外面的tabC*/
  .tabControl1{
    position: relative;
    z-index: 9;
  }

</style>
